<template>
    <div class="w_editor">
        <!--        <el-button @click="addNewEditor">添加图层</el-button>-->
        <!--        <el-button @click="getHtml">获取文本内容</el-button>-->
        <div class="allCon">
            <p>---------------------</p>
            <div
                    v-for="(item,index) in editor"
                    :style="{display: item.topBarId == topActive ? '' : 'none' }"
                    :key="index"
                    :id="item.topBarId"
                    class="toolbar"></div>
            <p>-------------------------------------------------------</p>

            <!--echarts插入开始-->
            <el-dialog
                    title="提示"
                    :visible.sync="centerDialogVisible"
                    width="30%"
                    center>
                <span>
                    <el-button @click="getEcharts('img')">图片</el-button>
                    <el-button @click="getEcharts('echarts')">echarts</el-button>
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="getEcharts">引入echarts</el-button>
                </span>
            </el-dialog>
            <!--echarts插入结束-->
            <!--样式选择插入开始-->
            <el-dialog title="提示"
                       :visible.sync="bannerStyleDialog"
                       width="30%"
                       center>
                <div class="styleImg">
                    <img
                            style="width: 60px;height: 60px;margin-right: 10px;border: 1px solid black"
                            v-for="(item , index) in styleList"
                            :key="index" :src="item.imgUrl"
                            @click="choseStyle(item)">
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="bannerStyleDialog = false">取 消</el-button>
                    <el-button type="primary" @click="bannerStyleDialog = false">引入echarts</el-button>
                </span>
            </el-dialog>
            <!--样式选择插入结束-->
            <!--图层删除开始-->
            <el-dialog
                    title="提示"
                    :visible.sync="removeDialogVisible"
                    width="30%"
                    center>
                <span>是否删除该图层？</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="removeDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="removeSure">确 定</el-button>
                </span>
            </el-dialog>
            <!--图层删除结束-->
            <div class="mainContent">
                <!--左侧banner区域-->
                <div class="leftBanner" style="">
                    <div class="bannerHeader">
                        <span @click="addBanner">新建文稿</span>
                        <span @click="bannerStyleDialog = true">选择样式</span>
                    </div>
                    <div style="width: 100%;height: 90%;overflow: scroll;overflow-x: hidden;">
                        <div class="banerImg" v-for="(item,index) in bannerList" :id="`page${index+1}`">
                            <!--                        page{{ index + 1 }}-->
                            <!--            <img class="banerImg" style="width: 100%;height: 100%" :src="item.bgUrl"></img>-->
                            <i class="el-icon-delete-solid delClass" @click="delBanner(index)"></i>
                        </div>
                    </div>
                </div>
                <!--右侧ppt区域-->
                <div id="div1">
<!--                    <img src="https://i.loli.net/2021/11/15/GmFlRxr5iaEtdv7.jpg" >-->
<!--                    <img src="https://i.loli.net/2021/11/15/RtHUOkysw1rA7Xx.jpg" >-->
                    <div
                            :id="item.contentId+'OutBox'"
                            class="editorBox"
                            v-for="(item,index) in editor"
                            :key="index"
                            @click="getIndex(item,index)"
                            @dblclick="readyToRemove(item,index)"
                            :style="`top:${item.style.top};left:${item.style.left};width:${item.style.width};height:${item.style.height}`"
                            @keyup="upDataView"
                            @mousedown="scaleDom($event,item)"
                            @mouseup="mouseUp">
                        <div
                                :id="item.contentId"
                                style="width: 100%;height: 100%"
                                class="text commonStyle">
                        </div>
                        <i class="el-icon-delete-solid delClass" v-if="item.html" @click="delContent(item)"></i>
                        <i class="el-icon-circle-plus addClass" v-if="!item.html" @click="addContent(item)"></i>
                        <div class="topLeft" @mousedown.stop="leftMouseDown(item.contentId+'OutBox','topLeft')"></div>
                        <div class="topRight" @mousedown.stop="leftMouseDown(item.contentId+'OutBox','topRight')"></div>
                        <div class="bottomLeft"
                             @mousedown.stop="leftMouseDown(item.contentId+'OutBox','bottomLeft')"></div>
                        <div class="bottomRight"
                             @mousedown.stop="leftMouseDown(item.contentId+'OutBox','bottomRight')"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    const E = window.wangEditor

    export default {
        name: "goods",
        data() {
            return {
                mouseT: null,
                mouseL: null,
                idName: null,
                mouseSizeT: null,
                mouseSizeL: null,
                boxName: null,
                elementHeight: null,
                elementWidth: null,
                position: null,
                //批量添加editor
                editor: [
                    {
                        topBarId: 'toolbar-container1',
                        contentId: 'text-container1',
                        style: {
                            top: '20px',
                            left: '20px',
                            width: '400px',
                            height: '400px',
                        },
                        editorObj: null,
                        haveHtml: false,
                        echartsObj: null,   //实例化echarts
                        echartsContent: null, //echarts内容
                        html: ``
                    },
                ],
                editorObj: [],
                //添加功能弹框
                centerDialogVisible: false,
                num: null,
                topActive: null,
                currentEditor: null,
                currentIndex: null,
                addTarget: null,
                bannerList: [
                    {
                        bgUrl: 'https://img0.baidu.com/it/u=2471999871,2197976952&fm=26&fmt=auto'
                    }
                ],
                bannerStyleDialog: false,
                styleList: [
                    {
                        contnet: [
                            {
                                topBarId: 'toolbar-container1',
                                contentId: 'text-container1',
                                style: {
                                    top: '20px',
                                    left: '20px',
                                    width: '94%',
                                    height: '94%',
                                },
                                html: '<p>aaa1</p><p>aaa2</p><p>aaa3</p><p>aaa4</p>',
                                editorObj: null,
                                haveHtml: false,
                                echartsObj: null,
                                echartsContent: null,
                            },
                        ],
                        imgUrl: 'https://i.loli.net/2021/11/19/8KFcgUxpEzNulaj.png'
                    },
                    {
                        contnet: [
                            {
                                topBarId: 'toolbar-container1',
                                contentId: 'text-container1',
                                style: {
                                    top: '4%',
                                    left: '20px',
                                    width: '94%',
                                    height: '20%',
                                },
                                html: '<p>111111</p>',
                                editorObj: null,
                                haveHtml: false,
                                echartsObj: null,
                                echartsContent: null,
                            },
                            {
                                topBarId: 'toolbar-container2',
                                contentId: 'text-container2',
                                style: {
                                    top: '28%',
                                    left: '20px',
                                    width: '94%',
                                    height: '20%',
                                },
                                html: '<p>222222</p>',
                                editorObj: null,
                                haveHtml: false,
                                echartsObj: null,
                                echartsContent: null,
                            },
                            {
                                topBarId: 'toolbar-container3',
                                contentId: 'text-container3',
                                style: {
                                    top: '52%',
                                    left: '20px',
                                    width: '94%',
                                    height: '20%',
                                },
                                html: '<p>333333</p>',
                                editorObj: null,
                                haveHtml: false,
                                echartsObj: null,
                                echartsContent: null,
                            },
                            {
                                topBarId: 'toolbar-container4',
                                contentId: 'text-container4',
                                style: {
                                    top: '76%',
                                    left: '20px',
                                    width: '94%',
                                    height: '20%',
                                },
                                html: '<p>444444</p>',
                                editorObj: null,
                                haveHtml: false,
                                echartsObj: null,
                                echartsContent: null,
                            },
                        ],
                        imgUrl: 'https://i.loli.net/2021/11/19/Sb6aQ2WBGOz5EFZ.png'
                    }
                ],
                removeIndex: null,
                removeDialogVisible: false,
            };
        },
        watch: {},
        mounted() {
            // 初始化富文本编辑器
            this.editor.forEach((item, index) => {
                this.funcAddEditor(item, index)
            })
        },
        methods: {
            //防抖
            debounce(fn, wait) {
                var timer = null;
                return function () {
                    if (timer !== null) {
                        clearTimeout(timer);
                    }
                    timer = setTimeout(fn, wait);
                }
            },
            //editor封装
            funcAddEditor(item, index) {
                var that = this
                const E = window.wangEditor
                const {$, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip} = E

                class addMenu extends BtnMenu {
                    constructor(editor) {
                        // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
                        const $elem = E.$(
                            `<div class="w-e-menu" data-title="添加图层">
                                <i class="iconfont icon-text" id="addEditor"></i>
                            </div>`
                        )
                        super($elem, editor)
                    }

                    // 菜单点击事件
                    clickHandler() {
                        console.log('添加')
                        that.addNewEditor()
                    }

                    tryChangeActive() {
                        this.active()
                    }
                }

                const addMenuKey = 'addMenuKey'
                E.registerMenu(addMenuKey, addMenu)

                class saveMenu extends BtnMenu {
                    constructor(editor) {
                        // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
                        const $elem = E.$(
                            `<div class="w-e-menu" data-title="保存">
                                <i class="iconfont icon-select" id="saveEditor"></i>
                            </div>`
                        )
                        super($elem, editor)
                    }

                    // 菜单点击事件
                    clickHandler() {
                        console.log('保存')
                    }

                    tryChangeActive() {
                        this.active()
                    }
                }

                const saveMenuKey = 'saveMenuKey'
                E.registerMenu(saveMenuKey, saveMenu)
                item.editorObj = new E(`#${item.topBarId}`, `#${item.contentId}`)
                item.editorObj.config.onchange = function (newHtml) {
                    item.html = item.editorObj.txt.html()
                    that.$set(that.editor, index, item)
                    console.log('数据改变1')
                    that.debounce(that.getHtml(),5000)
                };
                item.editorObj.create()
            },
            //删除图层
            readyToRemove(item, index) {
                this.currentEditor = item
                document.addEventListener('keyup', (e) => {
                    if (e.keyCode == 46) {
                        //删除选中图层
                        this.removeDialogVisible = true
                        this.removeIndex = index
                    }
                })
            },
            //删除图层
            removeSure() {
                this.editor[this.removeIndex].editorObj.destroy()
                this.editor.splice(this.removeIndex, 1)
                this.removeDialogVisible = false
                this.removeIndex = null
            },
            //添加文稿
            addBanner() {
                console.log('添加新的文稿')
                this.bannerList.push({
                    banner: '',
                    bgUrl: 'https://img0.baidu.com/it/u=2471999871,2197976952&fm=26&fmt=auto'
                })
            },
            choseStyle(choseItem) {
                var that = this
                console.log('选择样式')
                choseItem.contnet[0].add = new Date()
                //初始化editor
                this.editor.forEach(item => {
                    item.editorObj.destroy()
                    item.editorObj = null
                })
                this.editor = []
                choseItem.contnet.forEach((item, index) => {
                    this.editor.push(JSON.parse(JSON.stringify(item)))
                    var domObj = document.getElementById(`${item.contentId}OutBox`)
                    if (domObj != null) {
                        domObj.style.top = item.style.top
                        domObj.style.left = item.style.left
                        domObj.style.width = item.style.width
                        domObj.style.height = item.style.height
                    }
                })

                this.$nextTick(() => {
                    console.log('test')
                    this.editor.forEach(item => {
                        const E = window.wangEditor
                        item.editorObj = new E(`#${item.topBarId}`, `#${item.contentId}`)
                        item.editorObj.config.onchange = function (newHtml) {
                            item.html = item.editorObj.txt.html()
                            console.log('数据改变3')
                            that.debounce(that.getHtml(),5000)
                        };
                        item.editorObj.create()
                        item.editorObj.txt.html(`<p>${item.html}</p>`)
                    })
                })

                this.bannerStyleDialog = false
            },
            delBanner(index) {
                console.log('删除文稿')
                console.log(index, '下标')
                this.bannerList.splice(index, 1)
            },
            getEcharts(type) {
                console.log(this.addTarget, '创建echarts')

                if( type == 'img' ){
                    this.addTarget.editorObj.txt.html('<img id="main" src="https://img0.baidu.com/it/u=1051577226,2771334401&fm=26&fmt=auto" style="width: 100%;height:100%;">')

                }else if( type == 'echarts' ){
                    this.addTarget.editorObj.txt.html('<div id="main" style="width: 100%;height:100%;"></div>')
                    // 创建节点
                    var that = this
                    this.$nextTick(() => {
                        that.addTarget.echartsObj = echarts.init(document.getElementById('main'));
                        that.addTarget.echartsContent = {
                            title: {
                                text: 'ECharts 入门示例'
                            },
                            tooltip: {},
                            legend: {
                                data: ['销量']
                            },
                            xAxis: {
                                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                            },
                            yAxis: {},
                            series: [
                                {
                                    name: '销量',
                                    type: 'bar',
                                    data: [5, 20, 36, 10, 10, 20]
                                }
                            ]
                        }
                        // 使用刚指定的配置项和数据显示图表。
                        that.addTarget.echartsObj.setOption(that.addTarget.echartsContent);
                    })
                }


                //关闭对话框
                this.centerDialogVisible = false
            },
            getHtml() {

                console.log('文本内容')
                var divObj = document.getElementById(('div1'))

                html2canvas(divObj, {
                    useCORS: true
                }).then(canvas => {
                    canvas.style.width = '100%';
                    canvas.style.height = "100%";

                    if( divObj.getElementsByTagName('img') == 0 ){
                        document.getElementById('div1').appendChild(canvas)
                    }else{
                        document.getElementById('page1').style.backgroundImage = `url(${canvas.toDataURL('image/jpg')})`
                        document.getElementById('page1').style.backgroundSize = `100% 100%`
                    }
                });

                return

                var obj = []
                this.editor.forEach((item, index) => {
                    console.log(item, '获取文本内容')
                    var currentDom = document.getElementById(item.contentId + 'OutBox')
                    var width = currentDom.style.width
                    var height = currentDom.style.height
                    var top = currentDom.style.top
                    var left = currentDom.style.left
                    //宽度百分比判断
                    if (width.indexOf('%') != -1) {
                        width = 800 * (width.substring(0, width.length - 1) / 100) + 'px'
                    }
                    //高度百分比判断
                    if (height.indexOf('%') != -1) {
                        height = 800 * (height.substring(0, height.length - 1) / 100) + 'px'
                    }
                    //top定位百分比判断
                    if (top.indexOf('%') != -1) {
                        top = 800 * (top.substring(0, top.length - 1) / 100) + 'px'
                    }
                    //left定位百分比判断
                    if (top.indexOf('%') != -1) {
                        top = 800 * (top.substring(0, top.length - 1) / 100) + 'px'
                    }
                    //获取html内容
                    var html = item.editorObj.txt.html()
                    obj.push({
                        editor: {
                            topBarId: item.topBarId,
                            contentId: item.contentId,
                            style: `top:${top};left:${left};width:${width};height:${height}`,
                            editorObj: null,
                            haveHtml: '',
                            html: html,
                        }
                    })
                })
            },
            delContent(item) {
                item.editorObj.txt.clear()   //清除文本内容
                item.echartsObj = null  //清除echarts实例化
                item.echartsContent = null  //清除echarts内容
            }
            ,
            //添加新的富文本编辑器
            addNewEditor() {
                var that = this
                if (this.num == null) {
                    this.num = this.editor.length + 1
                } else {
                    this.num = this.num + 1
                }
                this.editor.push({
                    topBarId: `toolbar-container${this.num}`,
                    contentId: `text-container${this.num}`,
                    style: {
                        top: '200px',
                        left: '200px',
                        width: '30%',
                        height: '30%',
                    },
                    editorObj: null,
                    haveHtml: false,
                    html: '',
                })
                this.$nextTick(() => {
                    const M = window.wangEditor

                    var testE = new M(`#toolbar-container${this.num}`, `#text-container${this.num}`)
                    testE.config.onchange = function (newHtml) {
                        that.currentEditor.html = newHtml
                        console.log('数据改变2')
                        that.debounce(that.getHtml(),5000)
                    };
                    this.editor[this.editor.length - 1].editorObj = testE
                    testE.create()
                })

            }
            ,
            addContent(target) {
                this.centerDialogVisible = true
                this.addTarget = target
            }
            ,
            leftMouseDown(boxName, position) {
                this.position = position
                this.boxName = boxName
                document.addEventListener('mousemove', this.boxSize)
                document.addEventListener('mouseup', () => {
                    this.mouseSizeT = null
                    this.mouseSizeL = null
                    this.elementHeight = null
                    this.elementWidth = null
                    document.removeEventListener('mousemove', this.boxSize)
                })
            }
            ,
            boxSize(event) {
                var box = document.getElementById(this.boxName)
                var top = event.clientY
                var left = event.clientX
                //高度控制
                if (this.mouseSizeT !== null) {
                    if (this.elementHeight == null) {
                        this.elementHeight = box.offsetHeight
                    }
                    //位置判断

                    if (this.position == 'topLeft') {
                        //左上
                        box.style.height = this.elementHeight + (this.mouseSizeT - top) + 'px'
                        box.style.top = Number(box.style.top.replace('px', '')) - (this.mouseSizeT - top) + 'px'
                        this.elementHeight = this.elementHeight + (this.mouseSizeT - top)
                    } else if (this.position == 'bottomLeft') {
                        // 左下
                        box.style.height = this.elementHeight - (this.mouseSizeT - top) + 'px'
                        this.elementHeight = this.elementHeight - (this.mouseSizeT - top)
                    } else if (this.position == 'topRight') {
                        // 右上
                        box.style.height = this.elementHeight + (this.mouseSizeT - top) + 'px'
                        box.style.top = Number(box.style.top.replace('px', '')) - (this.mouseSizeT - top) + 'px'
                        this.elementHeight = this.elementHeight + (this.mouseSizeT - top)
                    } else if (this.position == 'bottomRight') {
                        // 右下
                        box.style.height = this.elementHeight - (this.mouseSizeT - top) + 'px'
                        this.elementHeight = this.elementHeight - (this.mouseSizeT - top)
                    }


                    this.mouseSizeT = top
                } else {
                    this.mouseSizeT = top
                }
                //宽度控制
                if (this.mouseSizeL !== null) {
                    if (this.elementWidth == null) {
                        this.elementWidth = box.offsetWidth
                    }
                    //位置判断

                    if (this.position == 'topLeft') {
                        //左上
                        box.style.width = this.elementWidth + (this.mouseSizeL - left) + 'px'
                        box.style.left = Number(box.style.left.replace('px', '')) - (this.mouseSizeL - left) + 'px'
                        this.elementWidth = this.elementWidth + (this.mouseSizeL - left)
                    } else if (this.position == 'bottomLeft') {
                        // 左下
                        box.style.width = this.elementWidth + (this.mouseSizeL - left) + 'px'
                        box.style.left = Number(box.style.left.replace('px', '')) - (this.mouseSizeL - left) + 'px'
                        this.elementWidth = this.elementWidth + (this.mouseSizeL - left)
                    } else if (this.position == 'topRight') {
                        // 右上
                        box.style.width = this.elementWidth - (this.mouseSizeL - left) + 'px'
                        this.elementWidth = this.elementWidth - (this.mouseSizeL - left)
                    } else if (this.position == 'bottomRight') {
                        // 右下
                        box.style.width = this.elementWidth - (this.mouseSizeL - left) + 'px'
                        this.elementWidth = this.elementWidth - (this.mouseSizeL - left)
                    }
                    this.mouseSizeL = left
                } else {
                    this.mouseSizeL = left
                }
            }
            ,
            scaleDom(event, item) {
                this.currentEditor = item
                this.idName = item.contentId + 'OutBox'
                document.addEventListener('mousemove', this.move)
                document.addEventListener('mouseup', (event) => {
                    this.mouseT = null
                    this.mouseL = null
                    document.removeEventListener('mousemove', this.move)
                })
            }
            ,
            move(event) {
                //获取操作对象
                var obj = document.getElementById(this.idName)
                //获取鼠标在当前屏幕的位置
                var windowY = event.clientY
                var windowX = event.clientX
                var top = obj.style.top
                var left = obj.style.left
                if (top.indexOf('%') != -1) {
                    top = document.getElementById('div1').offsetHeight * (top.substring(0, top.length - 1) / 100) + 'px'
                }
                if (left.indexOf('%') != -1) {
                    left = document.getElementById('div1').offsetWidth * (left.substring(0, left.length - 1) / 100) + 'px'
                }
                if (this.mouseT !== null) {
                    obj.style.top = Number(top.replace('px', '')) - (this.mouseT - windowY) + 'px'
                    this.mouseT = windowY
                    console.log(this.editor, 'editorTop')
                    this.editor[this.currentIndex].style.top = obj.style.top
                } else {
                    this.mouseT = windowY
                }
                if (this.mouseL !== null) {
                    obj.style.left = Number(left.replace('px', '')) - (this.mouseL - windowX) + 'px'
                    this.mouseL = windowX
                } else {
                    this.mouseL = windowX
                }
            }
            ,
            mouseUp(event) {
                console.log(event, 'mouseup')
            }
            ,
            //编辑栏的显示隐藏
            getIndex(item, index) {
                this.currentEditor = item
                this.currentIndex = index
                this.topActive = item.topBarId
            },
            upDataView() {
                // this.getHtml()
            }
        },
        beforeCreate() {
        },
        created() {
        },
        beforeMount() {
        },

    }
</script>

<style scoped>
    .allCon {
        width: 100%;
        height: 100%;
        /*background: pink;*/
    }

    #div1 {
        width: 78%;
        height: 100%;
        position: relative;
        overflow: hidden;
        background: white;
        background-image: url(https://i.loli.net/2021/11/15/RtHUOkysw1rA7Xx.jpg), url(https://i.loli.net/2021/11/15/GmFlRxr5iaEtdv7.jpg);
        background-repeat: no-repeat;
        background-position: 0% 100%, 100% 0%;
        float: right;

    }

    #div1>img{
        position: absolute;
    }

    #div1>img:nth-of-type(1){
        position: absolute;
        top: 0;
        right: 0;
    }

    #div1>img:nth-of-type(2){
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .editorBox {
        width: 95%;
        height: 95%;
        position: absolute !important;
        left: 50px;
        top: 50px;
        position: relative;
    }

    .toolbar {
        border: 1px solid #ccc;
    }

    /deep/ .text {
        border: 1px dashed #ccc;
        min-height: 20px;
        opacity: 0.8;
    }

    .delClass {
        font-size: 20px;
        border-radius: 50%;
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer
    }

    .addClass {
        font-size: 20px;
        position: absolute;
        right: 5px;
        bottom: 5px;
        cursor: pointer
    }


    .topLeft {
        position: absolute;
        width: 10px;
        height: 10px;
        cursor: nw-resize;
        z-index: 100;
        border: 1px solid black;
        border-radius: 50%;
        top: -5px;
        left: -5px;
        background: white;
    }

    .topRight {
        position: absolute;
        width: 10px;
        height: 10px;
        cursor: ne-resize;
        z-index: 100;
        border: 1px solid black;
        border-radius: 50%;
        top: -5px;
        right: -5px;
        background: white;
    }

    .bottomLeft {
        position: absolute;
        width: 10px;
        height: 10px;
        cursor: sw-resize;
        z-index: 100;
        border: 1px solid black;
        border-radius: 50%;
        bottom: -5px;
        left: -5px;
        background: white;
    }

    .bottomRight {
        position: absolute;
        width: 10px;
        height: 10px;
        cursor: se-resize;
        z-index: 100;
        border: 1px solid black;
        border-radius: 50%;
        bottom: -5px;
        right: -5px;
        background: white;
    }

    .topClass {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
    }

    /deep/ .w-e-text-container {
        overflow: visible !important;
    }


    .commonStyle {
        /*position: absolute !important;*/
        min-height: 20px !important;
        /*width: 30%;*/
        /*height: 30%;*/
        /*top: 300px;*/
        /*left: 300px;*/
    }

    .el-dialog__wrapper {
        z-index: 30000 !important;
    }

    /deep/ .w-e-toolbar {
        z-index: 200 !important;
    }

    .leftBanner {
        width: 20%;
        height: 100%;
        background: #EAEAEA;
        float: left;
    }

    .bannerHeader {
        width: 100%;
        height: 6%;
        background: white;
        line-height: 36px;
        font-size: 12px;
    }

    .bannerHeader > span:nth-of-type(1) {
        border-right: 1px solid black;
    }

    .bannerHeader > span {
        width: 49%;
        text-align: center;
        display: inline-block;
        cursor: pointer;

    }

    .banerImg {
        width: 100%;
        height: 100px;
        border: 1px solid red;
        cursor: pointer;
        margin-bottom: 20px;
        position: relative;
    }

    .banerImg:nth-of-type(1) {
        margin-top: 20px;
    }

    .styleImg {
        width: 80%;
    }

    .mainContent {
        width: 1000px;
        height: 500px;
        background: black;
        margin: 0 auto;
    }

    .allCon {
        background: black;
    }
</style>